<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ __('Login') }} | {{ config('site.base.name') }}</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <!-- v4.1.3 -->
    <link rel="stylesheet" href="{{ asset('cetc/bootstrap/css/bootstrap.min.css')}}">

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('cetc/img/favicon-16x16.png')}}">

    <!-- Google Font -->
    <link href="{{asset('cetc/css/google/font.css')}}" rel="stylesheet">

    <!-- Theme style -->
    <link rel="stylesheet" href="{{ asset('cetc/css/style.css')}}">
    <link rel="stylesheet" href="{{ asset('cetc/css/font-awesome/css/font-awesome.min.css')}}">
    <link rel="stylesheet" href="{{ asset('cetc/css/et-line-font/et-line-font.css')}}">
    <link rel="stylesheet" href="{{ asset('cetc/css/themify-icons/themify-icons.css')}}">
    <link rel="stylesheet" href="{{ asset('cetc/css/simple-lineicon/simple-line-icons.css')}}">
    <link rel="stylesheet" href="{{ asset('cetc/css/skins/_all-skins.min.css')}}">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="{{ asset('cetc/js/html5shiv.min.js') }}"></script>
    <script src="{{ asset('cetc/js/respond.min.js') }}"></script>
    <![endif]-->

</head>
<body class="login-page">
<div class="login-box">
    <div class="login-box-body">
        <h3 class="login-box-msg">{{ __('Login') }}</h3>
        <form action="{{route('family.login')}}" method="post">
            {{ csrf_field() }}
            <div class="form-group has-feedback">
                <input type="text" id="phone" name="phone" class="form-control sty1" placeholder="{{ __('Mobile') }}"
                       value="{{old('phone')}}">

                <span class="help-block text-danger" id="send_smsS">
                @if($errors->has('phone'))
                    {{ $errors->first('phone') }}
                @endif
                </span>
            </div>
            <div class="form-group has-feedback">
                <div class="input-group password single">
                    <input class="form-control sty1" style="padding-right: 10px" placeholder="{{ __('Captcha') }}"
                           type="text" id="sms_code" name="sms_code">
                    <button class="btn btn-outline-primary" type="button" id="send_sms">获取验证码</button>

                </div>

                @if($errors->has('sms_code'))
                    <span class="help-block text-danger">{{ $errors->first('sms_code') }}</span>
                @endif
            </div>

            @if(session()->has('error'))
                <div class="form-group has-feedback">
                    <span class="help-block text-danger">{{ session()->get('error') }}</span>
                </div>
            @endif
            <div>
                <div class="col-xs-4 m-t-1">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">{{ __('Login') }}</button>
                </div>
            </div>
        </form>
    </div>
    <!-- /.login-box-body -->
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="{{ asset('cetc/js/jquery.min.js')}}"></script>

<!-- v4.0.0-alpha.6 -->
<script src="{{ asset('cetc/bootstrap/js/bootstrap.min.js')}}"></script>

<!-- template -->
<script src="{{ asset('cetc/js/bizadmin.js')}}"></script>

<!-- NeoAdmin for demo purposes -->
<script src="{{ asset('cetc/js/demo.js')}}"></script>



<script>
    var flag = true;   //设置点击标记，防止60内再次点击生效

    $('#send_sms').on('click', function () {
        var $that = $(this);
        var mobile = $('#phone');

        if (flag == false) {
            return false;
        }

        console.log(mobile.val());
        if (!mobile.val()) {
            console.log(mobile.val());
            $("#send_smsS").text("{{ __('Please enter :attribute', ['attribute' => __('Mobile')]) }}")
            return false;
        }else{
            $("#send_smsS").text("");
        }
       // $that.addClass('has-send');
        flag = false;
        $that.attr("disabled",true);

        var oldText = $that.text();
        var tickerTime = 60;
        var ticker = null;
        $that.text('{{ __('Sending...') }}');
        $.ajax({
            url: "{{route("family.login.sms")}}",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                phone: mobile.val()
            },
            dataType: "json",
            success: function (res) {
                if (res.error == 0) {
                    ticker = setInterval(function () {
                        if (tickerTime <= 1) {
                            clearInterval(ticker);
                            $that.text(oldText);
                            //$that.removeClass('has-send');
                            flag = true;
                            $that.removeAttr("disabled");
                        } else {
                            $that.text(tickerTime + '秒后重发');
                        }
                        tickerTime--;
                    }, 1000);

                    alert(res.message);
                } else {
                    $("#send_smsS").text(res.message);
                    clearInterval(ticker);
                    $that.text(oldText);
                    //$that.removeClass('has-send');
                    flag = true;
                    $that.removeAttr("disabled");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                clearInterval(ticker);
                $that.text(oldText);
                //$that.removeClass('has-send');
                flag = true;
                $that.removeAttr("disabled");
            }
        });
        return false;
    });
</script>
</body>
</html>